<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-form">
        <h2>后台管理系统</h2>
        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    ...mapActions('user', ['login']),
    handleLogin () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.login({account:this.loginForm.username,password:this.loginForm.password}).then((res) => {
            if (res.errCode == 0) {
              this.loading = false
              this.$store.commit('user/SET_USER_INFO', res.data)
              this.$router.push('/home')
              this.$message.success('登录成功')
            } else {
              this.loading = false
              this.$message.error(res.msg)
            }
          }).catch((error) => {
            this.loading = false
            this.$message.error('登录失败，请检查用户名和密码')
            console.error('Login error:', error)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  // 科技背景装饰
  &::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    top: -250px;
    right: -250px;
  }

  &::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    bottom: -150px;
    left: -150px;
  }

  // 网格线装饰
  .grid-line {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
  }
}

.login-wrapper {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 420px;
  max-width: 90%;
  z-index: 10;
  animation: fadeIn 0.5s ease-out;
}

.login-form {
  padding: 40px;

  h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-weight: 600;
  }

  .el-form-item {
    margin-bottom: 25px;
  }

  .el-input {
    .el-input__inner {
      height: 40px;
      border-radius: 6px;
    }
  }

  .el-button {
    height: 40px;
    border-radius: 6px;
    font-size: 16px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
